<template>
	<view class="address">
		<!-- 头部 -->
		<!-- #ifndef MP-WEIXIN -->
		<public-header :title="title"></public-header>
		<view class="hei_100"></view>
		 <!-- #endif -->
		<!-- end -->

		<!-- 内容 -->
		<view class="content padd_32">
			<view class="name clearfix">
				联系人
				<input type="text" v-model="name" value="" class="fr" placeholder="必填" />
			</view>
			<view class="phone clearfix">
				手机号
				<input type="text" v-model="phone" value="" class="fr" placeholder="必填" />
			</view>
			<view class="region clearfix">
				选择地区
				<text class="fr" @tap="openAddres">{{ label }}</text>
			</view>
			<input type="text" v-model="address" value="" class="detailed" placeholder="请填写详细地址" />
		</view>
		<!-- end -->

		<!-- 按钮 -->
		<view v-if='cadd == "" ' class="add" @click="add">完成</view>
		<view v-else class="add" @click="c_add">确认修改</view>
		<!-- end -->

		<!-- 地址弹窗 -->
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
		<!-- end -->
	</view>
</template>

<script>
import PublicHeader from '@/components/PublicHeader.vue';
import ServiceList from '@/components/list/ServiceList.vue';
import simpleAddress from '@/pageageA/components/simple-address/simple-address.nvue';
import { mapState, mapMutations } from 'vuex';
export default {
	components: {
		PublicHeader,
		ServiceList,
		simpleAddress
	},
	computed: mapState(['hasLogin', 'uerInfo']),
	data() {
		return {
			title: '我的地址',
			cityPickerValueDefault: [0, 0, 0],
			label: '点击选择',
			pickerText: '',
			name:'',
			phone:'',
			address:'',
			cadd:''
		};
	},
	onLoad(option){
		var _this = this
		console.log(option)
		if(option.id){
			_this.$http
				.get('/personal/center/getaddresslist/' + this.uerInfo.userId)
				.then(function(response) {
					console.log(response.data)
					for(let i in response.data){
						if(response.data[i].id == option.id){
							_this.name = response.data[i].contactsName
							_this.phone = response.data[i].contactsPhone
							_this.address = response.data[i].address
							_this.label = response.data[i].province + '-' + response.data[i].city + '-' + response.data[i].region 
							_this.pickerText = [
								response.data[i].province,
								response.data[i].city,
								response.data[i].region
							]
							_this.cadd = option.id
						}
					}
				})
				.catch(function(error) {
					console.log(error);
				});			
		}
	},
	methods: {
		openAddres() {
			var _this = this;
			_this.$refs.simpleAddress.open();
		},
		onConfirm(e) {
			var _this = this;
			_this.pickerText = e.labelArr;
			_this.cityPickerValueDefault = e.value;
			_this.label = e.label;
		},
		add(){
			var _this = this
			if (this.name === '') {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '联系人不能为空'
				});
				return false;
			}
			if (this.phone.length!==11||this.phone[0]!=1) {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '请正确填写手机号'
				});
				return
			}
			if (this.province === '') {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '省、市、区不能为空'
				});
				return false;
			}
			if (this.address === '') {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '详细地址不能为空'
				});
				return false;
			}
			_this.$http
				.post('/personal/center/adduseraddress',{
					userId:_this.uerInfo.userId,
					contactsName:_this.name,
					contactsPhone:_this.phone,
					address:_this.address,
					province:_this.pickerText[0],
					city:_this.pickerText[1],
					region:_this.pickerText[2]
				})
				.then(function(response) {
					if(response.success == true){
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '添加成功'
						});
						setTimeout(function() {
							uni.redirectTo({
								url: '/pageageA/pages/address/index'
							});
						}, 100);
					}
					console.log(response);
				})
				.catch(function(error) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '添加失败，请检查信息是否有误'
					});
				});
		},
		c_add(){
			var _this = this
			console.log(this.name, this.phone)
			if (this.name === '') {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '联系人不能为空'
				});
				return false;
			}
			if (!/^1[34578]\d{9}$/.test(this.phone)) {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '请正确填写手机号'
				});
				return
			}
			if (this.province === '') {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '省、市、区不能为空'
				});
				return false;
			}
			if (this.address === '') {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '详细地址不能为空'
				});
				return false;
			}
			_this.$http
				.post('/personal/center/updateuseraddress',{
					userId:_this.uerInfo.userId,
					id:_this.cadd,
					contactsName:_this.name,
					contactsPhone:_this.phone,
					address:_this.address,
					province:_this.pickerText[0],
					city:_this.pickerText[1],
					region:_this.pickerText[2]
				})
				.then(function(response) {
					if(response.success == true){
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '修改成功'
						});
						setTimeout(function() {
							uni.redirectTo({
								url: '/pageageA/pages/address/index'
							});
						}, 1);
					}
					console.log(response);
				})
				.catch(function(error) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '修改失败，请检查信息是否有误'
					});
				});
		}
	}
};
</script>

<style scoped lang="scss">
.content {
	font-size: 30rpx;
	color: #333;
}
.content view {
	border-bottom: 1rpx solid #dfdfdf;
	height: 100rpx;
	line-height: 100rpx;
}
.content view input {
	width: 536rpx;
	line-height: 100rpx;
	height: 100rpx;
	padding-left: 60rpx;
	font-size: 28rpx;
}
.content view text {
	width: 536rpx;
	line-height: 100rpx;
	height: 100rpx;
	padding-left: 30rpx;
	font-size: 28rpx;
	color: #a6a6a6;
}
.detailed {
	padding-top: 29rpx;
}
.add {
	width: 686rpx;
	height: 100rpx;
	text-align: center;
	color: #fff;
	line-height: 100rpx;
	border-radius: 10rpx;
	box-shadow: 0px 6px 20px 0px $uni-color1;
	background-color: $uni-color1;
	font-size: 36rpx;
	position: fixed;
	bottom: 40rpx;
	left: 50%;
	margin-left: -343rpx;
}
</style>
